<template>
  <div class="flex total-gender bg-c-base align-center justify-between">
    <div class="flex">
      <img class="gender-img" :src="require('@/assets/images/nl.png')" />
      <div class="ml-4">
        <p>男性用户人数</p>
        <span class="sub-title">Number of male users</span>
        <div>
          <count-to-hy
            class="font-count-to font-weight"
            :end-val="totalGender.male"
            suffix=""
            :decimals="0"
          />
          <span class="unit">万人</span>
        </div>
      </div>
    </div>
    <div class="flex">
      <img class="gender-img" :src="require('@/assets/images/nl.png')" />
      <div class="ml-4">
        <p>女性用户人数</p>
        <span class="sub-title">Number of female users</span>
        <div>
          <count-to-hy
            class="font-count-to font-weight"
            :end-val="totalGender.female"
            suffix=""
            :decimals="0"
          />
          <span class="unit">万人</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive } from 'vue';
import mock from '@/hooks/mock';
export default {
	setup () {
		const { totalGender } = reactive(mock());
		return {
			totalGender,
		};
	},
};
</script>

<style lang="scss" scoped>
.total-gender {
  box-sizing: border-box;
  padding: 0 40px;
  height: 230px;
}
.gender-img {
  width: 75px;
  height: 75px;
}
</style>
